<template>
  <div class="content">
    <div class="common-header-wrap" v-if="article_content">
      <mt-header :title="article_title" class="common-header">
        <mt-button slot="left" icon="back"></mt-button>
      </mt-header>
    </div>
    <div class="information-detail-main">
      <!-- <div class="detail-title">{{ article_title }}</div> -->
      <!-- <div class="information-foot" v-if="article_content">
        <div class="foot-size">{{ gettime(article.article_time) }}</div>
        <div class="foot-size">{{ article.click_count }}人阅读</div>
      </div>-->
      <!-- @click="setPopupVisible" -->
      <div v-html="article_content" class="html-content"></div>
      <vue-picture-preview ref="mainSrc" :list="rishTextImageList"></vue-picture-preview>
    </div>
  </div>
</template>
<script>
import $ from "jquery";
import { getCopyLink, getArticleData } from "../../../api/homeArticle";
import vuePicturePreview from "vue-picture-preview";
import { Toast } from "mint-ui";
export default {
  name: "Informationlink",
  data() {
    return {
      article_content: "",
      htmlUrl: "home/information_link",
      artcileId: this.$route.query.article_id
        ? this.$route.query.article_id
        : "",
      article_title: "复制链接页面",
      article_content: "",
      article: {
        article_time: null,
        click_count: "",
      },
      // artcile_id
    }; //HomeInformationlink
  },
  created() {
    this.copyLink();
    this.articleData();
  },
  components: {
    vuePicturePreview,
  },
  computed: {
    rishTextImageList: function () {
      const list = [];
      // console.log(this.productDetail)
      if (!!this.article_content) {
        let rishText = this.article_content;
        rishText.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/g, function (
          match,
          src
        ) {
          list.push({ src });
        });
      }
      return list;
    },
  },
  mounted() {
    var _this = this;
    $(".html-content").on("click", "img", function (event) {
      for (var i = 0; i < _this.rishTextImageList.length; i++) {
        console.log(_this.rishTextImageList[i].src);
        var _index = _this.rishTextImageList[i].src.indexOf(this.src);
        if (_index >= 0) {
          // console.log(i)
          _this.$refs.mainSrc.show(i);
        }
      }
      // console.log(this.src)
    });
  },
  methods: {
    copyLink() {
      getCopyLink(this.htmlUrl)
        .then((res) => {
          console.log(123);
        })
        .catch((error) => {});
    },
    articleData() {
      if (this.artcileId) {
        getArticleData(this.artcileId)
          .then((res) => {
            console.log(res);
            if (res.code == 10000) {
              this.article_title = res.result.article_title;
              this.article_content = res.result.article_content;
            }
          })
          .catch((error) => {
            Toast(error.message);
          });
      }else{
        Toast("暂无内容（缺少文章ID）");
      }
    },
    gettime(t) {
      let _time = new Date(t * 1000);
      let year = _time.getFullYear(); // 2017
      let month = _time.getMonth() + 1; // 7
      let date = _time.getDate(); // 10
      let hour = _time.getHours(); // 10
      let minute = _time.getMinutes(); // 56
      let second = _time.getSeconds(); // 15
      return year + "-" + month + "-" + date;
    },
  },
};
</script>
<style lang="scss" scoped>
.hide {
  display: none;
  // opacity: 0;
}
.information-detail-main {
  // margin-top: 40px;
  padding: 2vw 4vw 0 4vw;
}
.detail-title {
  flex-wrap: wrap;
  font-size: 0.8rem;
  padding-top: 0.4rem;
  font-weight: bold;
}
.information-foot {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 0;
}
.foot-size {
  font-size: 0.5rem;
  color: #b5b5b5;
}
.html-content {
  font-size: 0.7rem;
  background-color: #ffffff;
}
</style>